<template>
  <div class="template-management">
    <zk-searcher v-model="query" :options="searchColumns" />
    <w-block class="body" title="模版信息列表" style="margin-top: 10px">
      <zk-table
        :columns="tableColumns"
        :service="service"
        :query="query"
        :actions="actions"
        @doOtherAction="doActions"
      >
      </zk-table>
    </w-block>
    <w-dialog :visible.sync="visible" height="auto" :title="modalTitle">
      <el-form ref="modelForm" :model="model" label-width="100px">
        <el-row>
          <el-col v-for="item of formColumns" :key="item.key" :span="item.span || 22">
            <el-form-item
              :label="item.label"
              :prop="item.key"
              :rules="item.required && [{ required: true, message: `请输入${item.label}`, trigger: ['blur'] }]"
            >
              <zk-item-pool
                v-model="model[item.key]"
                :option="{...item, disabled:item.disabled }"
              />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <template #footer>
        <div class="flex-end">
          <el-button type="default" @click="visible=false">取 消</el-button>
          <el-button type="primary" @click="submit">保 存</el-button>
        </div>
      </template>
    </w-dialog>
  </div>
</template>
<script>
  import { TYPE_ENUM } from '@/common/zk-constants'
  import { templateManagement as service } from '@/services'
  import SearchTableCRUDMixin from '@/mixins/search-table-crud-mixin'

  const columns = [
    { 'label': '模版名称', 'key': 'templateName', table: true, search: true, form: true, required: true },
    {
      'label': '项目类型',
      'key': 'project_type',
      table: true,
      search: true,
      type: TYPE_ENUM.SELECT,
      storeKey: 'projectType',
      form: true,
      required: true,
    },
    { 'label': '使用场景', 'key': 'content', table: true, form: true },
    {
      'label': '状态',
      'key': 'is_start',
      table: true,
      search: true,
      type: TYPE_ENUM.SELECT,
      storeKey: 'templateState',
      form: true,
    },
    { 'label': '创建人', 'key': 'create_person_name', table: true },
    { 'label': '创建机构', 'key': 'create_dept_name', table: true },
    { 'label': '创建时间', 'key': 'create_date', table: true },
  ]


  const actions = [
    { classname: 'primary', text: '查看流程', type: 'review' },
  ]
  export default {
    mixins: [SearchTableCRUDMixin],
    data() {
      return {
        columns,
        service,
        actions,
      }
    },
    computed: {
      modalTitle() {
        return this.isAddModal ? '添加' : '编辑'
      }
    },
    methods: {
      async doActions({ row: { id } = {} }) {
        this.$router.push(`/task-aging-settings/${id}/works`)
      },
    }
  }
</script>
<style scoped lang="scss">
</style>
